<!-- 项目维护管理页面。实现设备信息管理数据列表显示 CRUD -->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <h1>项目维护</h1>
      </el-col>
    </el-row>
    <el-row :gutter="22">
      <el-col :span="22" :offset="1">
        <el-date-picker
          v-model="projectMaintenanceQueryVo.beginStartDate"
          type="datetime"
          placeholder="选择开始时间区间"
          align="right"
          :picker-options="pickerDate"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>

        —
        <el-date-picker
          v-model="projectMaintenanceQueryVo.endStartDate"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始时间区间"
          type="datetime"
          :picker-options="pickerDate"
        >
        </el-date-picker>
        <el-date-picker
          v-model="projectMaintenanceQueryVo.beginDeadline"
          type="datetime"
          placeholder="选择结束时间区间"
          align="right"
          :picker-options="pickerDate"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        —
        <el-date-picker
          v-model="projectMaintenanceQueryVo.endDeadline"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择结束时间区间"
          :picker-options="pickerDate"
        >
        </el-date-picker>

        项目状态:
        <el-select
          v-model="projectMaintenanceQueryVo.state"
          clearable
          filterable
        >
          <el-option value="1">正常</el-option>
          <el-option value="2">挂起</el-option>
        </el-select>

        <el-button type="success" size="medium" @click="queryList()"
          >查询</el-button
        >
        <el-button type="info " size="medium" @click="clear()">重置</el-button>
      </el-col>

      <el-col :span="12" :offset="0">
        <el-button type="primary" size="medium" @click="sava('添加')"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24" :offset="0">
        <el-table :data="projectMaintenance" style="width: 100%">
          <el-table-column prop="id" label="编号" width="120" />
          <el-table-column prop="name" label="项目名" width="120" />
          <el-table-column prop="principal" label="负责人" width="180" />
          <el-table-column prop="startdate" label="开始日期" width="180" />
          <el-table-column prop="deadline" label="结束日期" width="180" />
          <el-table-column prop="state" label="项目状态" width="150" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="getUpdateById(scope.$index, scope.row, '编辑')"
                >编辑</el-button
              >

              <el-popconfirm
                confirm-button-text="要删"
                cancel-button-text="不删"
                icon="el-icon-info"
                icon-color="red"
                title="要删除这条数据吗?"
                @confirm="deleteById(scope.$index, scope.row)"
              >
                <el-button size="mini" type="danger" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 弹框 -->
    <el-dialog :title="title" width="50%" :visible.sync="savaOrUpdateDialog">
      <div>
        <el-form
          :model="saveOrUpdateInfo"
          ref="form"
          :rules="rules"
          label-width="80px"
          :inline="false"
          size="normal"
        >
          <el-row :gutter="20">
            <el-col :span="5" :offset="5">
              <span style="line-height: 40px">项目名: </span>
            </el-col>
            <el-col :span="5" :offset="0">
              <el-input style="width: 200px" v-model="saveOrUpdateInfo.name" />
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5" :offset="5">
              <span style="line-height: 40px">负责人: </span>
            </el-col>
            <el-col :span="5" :offset="0">
              <el-input
                style="width: 200px"
                v-model="saveOrUpdateInfo.principal"
              />
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5" :offset="5">
              <span style="line-height: 40px">开始日期: </span>
            </el-col>
            <el-col :span="5" :offset="0">
              <el-date-picker
                v-model="saveOrUpdateInfo.startdate"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerDate"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5" :offset="5">
              <span style="line-height: 40px">结束日期: </span>
            </el-col>
            <el-col :span="5" :offset="0">
              <el-date-picker
                v-model="saveOrUpdateInfo.deadline"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                :picker-options="pickerDate"
              >
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5" :offset="5">
              <span style="line-height: 40px">项目状态: </span>
            </el-col>
            <el-col :span="5" :offset="0">
              <el-input style="width: 200px" v-model="saveOrUpdateInfo.state" />
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="savaOrUpdateDialog = false">Cancel</el-button>
        <el-button type="primary" @click="saveOrUpdate()">OK</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryByList,
  insert,
  remove,
  update,
} from "@/api/manufacturing_execution_mes/Project_maintenance.js";

export default {
  data() {
    return {
      savaOrUpdateDialog: false, // 弹窗控制
      projectMaintenance: [{}], // 主页面数据
      projectMaintenanceQueryVo: {}, // 查询条件
      saveOrUpdateInfo: {
        // 新增 or 修改的参数
        id: 0,
      },
      title: "", // 弹窗标题控制
    };
  },
  methods: {
    // 查询
    queryList() {
      queryByList(this.projectMaintenanceQueryVo).then((resp) => {
        this.projectMaintenance = resp.data;
        console.log(this.projectMaintenance);
        this.$message({
          message: "数据已刷新",
          type: "success",
        });
      });
    },
    // 添加or修改
    saveOrUpdate() {
      console.log(this.saveOrUpdateInfo);
      if (this.saveOrUpdateInfo.id == 0) {
        // 添加
        insert(this.saveOrUpdateInfo).then((resp) => {
          if (resp.data == 1) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.savaOrUpdateDialog = false;
            this.queryList();
          }
        });
      } else {
        update(this.saveOrUpdateInfo).then((resp) => {
          if (resp.data == 1) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.savaOrUpdateDialog = false;
            this.queryList();
          }
        });
      }
    },
    // 修改
    getUpdateById(index, row, title) {
      this.title = title;
      // 获取修改的数据
      this.saveOrUpdateInfo = { ...row };
      this.savaOrUpdateDialog = true;
    },
    // 删除
    deleteById(index, row) {
      remove(row.id).then((resp) => {
        if (resp.data == 1) {
          this.$message({
            message: "删除成功",
            type: "warning",
          });
          this.queryList();
        }
      });
    },
    sava(title) {
      if (this.savaOrUpdateDialog == false) {
        this.saveOrUpdateInfo = { id: 0 };
        this.title = title;
        this.savaOrUpdateDialog = true;
      }
    },
    clear() {
      this.projectMaintenanceQueryVo = {};
      this.queryList();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.queryList();
  },
};
</script>

<style></style>